const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html'
        })
    ],
    /*
        1、loader 让 webpack 能够去处理那些非 JavaScript 文件
        （webpack 自身只理解 JavaScript）。loader 可以将所
        有类型的文件转换为 webpack 能够处理的有效模块，然后你
        就可以利用 webpack 的打包能力，对它们进行处理。
    
        2、使用loader处理文件,babel-loader依赖babel-core，所以需要一起引入，
        其次babel可以将ES6转换成ES5，也可以将JSX转换成JS语法，所以我们需
        要对babel-loader进行预设(presets),需要引入babel-preset-react

        3、重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 
        module.rules 中，而不是 rules。然而，在定义错误时 webpack 会
        给出严重的警告。
    */
    module: {
        rules: [{
            // test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件
            test: /\.js$/, 
            
            // use 属性，表示进行转换时，应该使用哪个 loader
            use: [{        
                loader: 'babel-loader',
                options: {
                    presets: ['react']
                }
            }]
        }]
    }
};
